import React, { useEffect, useState } from 'react'
import { deleteId, updateType } from '../../services/type'
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { Table, Form, Input, Radio, Space, Button, Pagination, Modal } from 'antd';
import { useSelector, useDispatch } from "react-redux";
import { setIsModalVisible, fetchType } from '../../store/slices/typeSlice';

const { Column, ColumnGroup, pagination } = Table;


export default function List({ type, show, pagination, }) {
    // 可以打印page，里面有current，pageSize的全部数据

    // 分发命令
    let dispatch = useDispatch();
    let { isModalVisible, types } = useSelector(state => {
        console.log("页面：", state.type);
        return state.type
    });
    console.log(types);

    const onChange = ({ current, pageSize, total }) => {
        console.log(current, pageSize, total);
        // 当前最后一页
        // console.log(page.current);
        let lastPage = Math.ceil(total / pageSize);
        console.log(lastPage);
        // 判断页数是否为最后一页
        // if (current == lastPage ? ) {

        // }
        // 调用父组件的show方法并把当前点击的current，pageSize传过去
        show({ current, pageSize });
        return { current };
    }
    const [form] = Form.useForm();
    // console.log(current);

    // 删除
    const onClickDel = async (text) => {
        // dispatch(fetchType(id));
        console.log(text, "saafsdgerhrea");
        // console.log("删除id：", id);
        Modal.confirm({
            title: '删除',
            content: '真的删除这条数据吗？',
            okText: '确认',
            cancelText: '取消',
            async onOk() {
                // console.log(id, types);
                // types.isShow = false;
                // let values = { ...types, }
                let data = await updateType({ ...text, isShow: JSON.stringify(false) });
                console.log("data", data);
                // await deleteId(id);
                // show();
            }
        });

    }
    // 修改
    const onClickUpdate = async (id) => {
        // axios 去调用slice里面的异步方法
        console.log("修改id：", id);
        dispatch(fetchType(id));
        dispatch(setIsModalVisible(true));
    }

    return (
        <div >

            <Table rowKey="_id" dataSource={type} bordered style={{ marginTop: "20px" }}

                pagination={pagination} onChange={onChange} >

                <Column title="商品类型" dataIndex="typeName" key="typeName" />

                <Column
                    title="操作"
                    key="action"
                    render={(text, record) => (
                        <Space size="middle">
                            <Button type="primary" onClick={() => onClickUpdate(text._id)} >修改</Button>
                            <Button type="primary" danger onClick={() => onClickDel(text)}>
                                删除
                            </Button>

                        </Space>
                    )}
                />
            </Table>
        </div>
    )
}
